<template>
  <div class="container">
    <van-empty v-if="allRiskList.length === 0" description="暂无信息" />
    <template v-else>
      <div class="tab-view" style="margin-bottom: 20px">
        <div
          class="tab"
          v-for="(tab, index) in tabs"
          :key="index"
          :class="index === active ? 'yxt-blue' : ''"
          @click="active = index"
        >
          {{ tab.text }}({{ tab.count }})
          <div class="line"></div>
        </div>
      </div>

      <div class="session-view" v-for="item of currentList" :key="item">
        <div class="flex flex-row justify-between items-center mb-3">
          <div class="flex flex-row items-center">
            <span :class="`risk-tag ${item.tagBgClass}`">{{ item.level }}</span>
            <h5>{{ item.title }}</h5>
          </div>
          <div class="yxt-blue text-right text-nowrap ml-2" @click="onClickReview(item)">
            回顾
          </div>
        </div>

        <p>{{ item.reson }}</p>
        <!-- <hr /> -->
        <van-divider />

        <p>
          {{ item.suggest }}
        </p>
      </div>
    </template>
  </div>
</template>

<script>
import { mapState, mapActions } from "pinia";
import { useMinutesStore } from "@/store";

export default {
  name: "AnalysisRisk",
  data() {
    return {
      active: 0,
    };
  },
  methods: {
    ...mapActions(useMinutesStore, {
      setPlayerTimeStampByRealTime: "setPlayerTimeStampByRealTime",
    }),
    onClickReview(item) {
      console.log("onClickReview: ", item);
      this.setPlayerTimeStampByRealTime(item.bt);
    },
  },
  computed: {
    ...mapState(useMinutesStore, {
      riskListInfo: "riskListInfo",
    }),

    allRiskList() {
      const { height, medium, low } = this.riskListInfo;
      return [...height, ...medium, ...low];
    },
    tabs() {
      const { height, medium, low } = this.riskListInfo;
      let array = [];
      array.push({
        text: "全部",
        count: height.length + medium.length + low.length,
        type: "all",
        list: this.allRiskList,
      });
      if (height.length > 0) {
        array.push({
          text: "高风险",
          count: height.length,
          type: "height",
          list: height,
        });
      }
      if (medium.length > 0) {
        array.push({
          text: "中风险",
          count: medium.length,
          type: "medium",
          list: medium,
        });
      }
      if (low.length > 0) {
        array.push({
          text: "低风险",
          count: low.length,
          type: "low",
          list: low,
        });
      }
      return array;
    },

    currentItem() {
      return this.tabs[this.active];
    },

    currentList() {
      const tagColorMap = {
        高: "risk-tag-red",
        中: "risk-tag-orange",
        低: "risk-tag-yellow",
      };
      return this.currentItem?.list.map((v) => {
        return {
          level: v.风险等级,
          tagBgClass: tagColorMap[v.风险等级] || "risk-tag-red",
          title: v.风险描述,
          reson: v.风险识别原因,
          suggest: v.应对措施.join("\n"),
          bt: v.来源.时间戳,
        };
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import "./analysis.less";

.line2 {
  width: 1px;
  height: 16px;
  margin: 0 16px;
  background-color: #e9e9e9;
}

hr {
  background-color: #e9e9e9;
  border-width: 0.5px;
  margin: 16px 0;
}

.session-view {
  font-size: 12px;
  background-color: #f9fafc;
}

.risk-tag {
  border-radius: 4px;
  padding: 2px 6px;
  color: white;
  margin-right: 12px;
}

.risk-tag-red {
  background-color: #ff111d;
}

.risk-tag-yellow {
  background-color: #f6bd16;
}

.risk-tag-orange {
  background-color: #ff761d;
}

p {
  white-space: pre-wrap;
}
</style>
